<template>
<div>
  <div><span>当前显示状态是: </span>{{ visibility }}</div>
  <div>显示隐藏历史是：
    <pre lang="json">
      {{ history }}
    </pre>
  </div>
</div>
</template>
<script setup lang="ts">
import {useDocumentVisibility, useRefHistory} from "@vueuse/core";

defineOptions({
  name: "UseDocumentVisibility"
})

const visibility = useDocumentVisibility()
// 切换浏览器tab时，记录显示隐藏状态历史更改记录
const { history } = useRefHistory(visibility)
</script>
